<template>
    <div class="login-container">
    <el-form class="login-form" :model="form" label-width="auto">
        <el-form-item label="用户名">
            <el-input v-model="form.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="form.passWord" placeholder="请输入密码" type="password" />
        </el-form-item>
        <span style="color: #A9A9A9;">默认用户名：admin： 123456</span>
        <el-form-item>
            <el-button type="primary" @click="login()">登陆</el-button>
        </el-form-item>
        
    </el-form>

    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import {useCounterStore} from '@/stores/counter'
const store = useCounterStore();
const router = useRouter();
const route = useRoute();
const form = reactive({
    userName: '',
    passWord: ''
})
const login = () => {
    if(form.userName === '' || form.passWord === '')
    {
        ElMessage.error('用户名或密码不能为空');
        return;
    }
    axios.post('https://localhost:7169/api/Good/Login',form)
    .then(res=>{
        console.log(res.data)
        if(res.data=="")
        {
            ElMessage.error("登陆失败");
        }
        else
        {
            ElMessage.success("登陆成功");
            store.UserNickname=res.data.userNickname
            console.log(store.UserNickname)
            router.push({name:'main'});
        }
    })
    
}
onMounted(() => {

})
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-form {
    width: 300px;
}
</style>